<template>
    <div class="processLine">
        <canvas  ref="myCanvas" :width="width" :height="height" style="background-color: #25417a">
            Your browser does not support the HTML5 canvas tag.
        </canvas>
    </div>


</template>

<script>
export default {
    name: "processLine",
    props: {
        width: {
            type: Number,
            default: 280
        },
        height: {
            type: Number,
            default: 14
        },
        score:{
            type: Number,
            default: 0
        }
    },
    data() {
        return {
            c:null,
            ctx:null,
            s1:90,
            s2:180,
            s3:270
          }

    },
    methods: {
        init(){
            let c =( this.$refs.myCanvas).getContext('2d');
            c.beginPath()
            c.moveTo(10,7)
            c.lineTo(275,7)
            c.lineCap="round"
            // c.strokeStyle='#ff6b6b'
            c.strokeStyle='#fff'
            c.lineWidth=10
            c.stroke()
        },
        draw(score){
            let c =( this.$refs.myCanvas).getContext('2d');
            c.beginPath()
            c.moveTo(5,7)
            let x = 0
            if (score===1){
               let a =  setInterval(()=>{
                    x +=1
                   if (x>=this.s1){
                       clearInterval(a)
                   }
                    c.lineTo(x,7)
                   c.lineCap="round"
                   c.strokeStyle='#ff6b6b'
                   // c.strokeStyle='#fff'
                   c.lineWidth=10
                   c.stroke()
                   console.log('s1',x)
                },50)
            }else if (score===2){
                let a =  setInterval(()=>{
                    x +=1
                    if (x>=this.s2){
                        clearInterval(a)
                    }
                    c.lineTo(x,7)
                    c.lineCap="round"
                    c.strokeStyle='#ff6b6b'
                    // c.strokeStyle='#fff'
                    c.lineWidth=10
                    c.stroke()
                    console.log('s2',x)
                },100)
            }else if (score===3){
                let a =  setInterval(()=>{
                    x +=1
                    if (x>=this.s3){
                        clearInterval(a)
                    }
                    c.lineTo(x,7)
                    c.lineCap="round"
                    c.strokeStyle='#ff6b6b'
                    // c.strokeStyle='#fff'
                    c.lineWidth=10
                    c.stroke()
                    console.log('s3',x)
                },100)
            }

        },
    },
    created() {
        this.$nextTick(()=>{
            this.init()
            this.draw()
      })

    }
}
</script>

<style scoped>
.processLine{
    position: relative;
}
</style>